<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>疫情监控</title>
		<script src="../static/js/jquery.js"></script>
		<script src="../static/js/echarts.min.js"></script>
		<script src="../static/js/china.js"></script>
		<script src="../static/js/worldcloud.js"></script>
		<link href="../static/css/main.css" rel="stylesheet" />
	</head>
	<body>
		<div id="title">全国新冠疫情实况</div>
		<div id="time"></div>
		<div id="l2"></div>
		<div id="l1"></div>
		<div id="c1">
			<div class="num">
				<h1></h1>
			</div>
			<div class="num">
				<h1></h1>
			</div>
			<div class="num">
				<h1></h1>
			</div>
			<div class="num">
				<h1></h1>
			</div>
			<div class="txt">
				<h2>现有确诊</h2>
			</div>
			<div class="txt">
				<h2>无症状</h2>
			</div>
			<div class="txt">
				<h2>现有疑似</h2>
			</div>
			<div class="txt">
				<h2>现有重症</h2>
			</div>
			<div class="num">
				<h1></h1>
			</div>
			<div class="num">
				<h1></h1>
			</div>
			<div class="num">
				<h1></h1>
			</div>
			<div class="num">
				<h1></h1>
			</div>
			<div class="txt">
				<h2>累积确诊</h2>
			</div>
			<div class="txt">
				<h2>境外输入</h2>
			</div>
			<div class="txt">
				<h2>累积治愈</h2>
			</div>
			<div class="txt">
				<h2>累积死亡</h2>
			</div>
		</div>
        <style>
            #now{
                position: relative;
                top:310px;
                left:37%;
            }
            #total{
                position: relative;
                top:310px;
                background: #fff;
                color:#3398DB;
            }
            .btn{
                cursor: pointer;
                display: inline-block;
                z-index:999;
                left:35%;
                padding:5px 20px;
                color:#fff;
                background:#3398DB;
                border-radius: 20px;
            }
        </style>
        <div class="btn" id="total">累计确诊</div>
        <div class="btn" id="now">现存确诊</div>
		<div id="c2" style="margin-left:50px;"></div>
		<div id="r1"></div>
		<div id="r2"></div>
		<style>
			#news{
				position: absolute;
				bottom: 0;
				right: 7%;

			}
			#news ul li{
				list-style-type: none;
    			margin-top: 10px;
			}
			#news ul li a{
				color:#fff;
				font-size: 2em;
				text-decoration:none;
			}
			.title{
				font-size: 22px;
				color: #fff;
				font-weight: 700;
			}
		</style>
		<!-- <div id="news">
			<p class="title">今日疫情热搜</p>
            <ul>
                <li><a href="https://www.zhihu.com/question/367346760?utm_content=new">香港的疫情现状是怎么样的？</a></li>
                <li><a href="https://www.zhihu.com/question/367346760?utm_content=new">香港的疫情现状是怎么样的？</a></li>
                <li><a href="https://www.zhihu.com/question/367346760?utm_content=new">香港的疫情现状是怎么样的？</a></li>
                <li><a href="https://www.zhihu.com/question/367346760?utm_content=new">香港的疫情现状是怎么样的？</a></li>
            </ul>
        </div> -->
		<script src="../static/js/ec_center.js"></script>
		<script src="../static/js/ec_left1.js"></script>
		<script src="../static/js/ec_left2.js"></script>
		<script src="../static/js/ec_right1.js"></script>
		<script src="../static/js/ec_right2.js"></script>
		<script src="../static/js/controller.js"></script>
		<!-- <script src="../static/js/bootstrap.min.js"></script> -->
		<!-- <script src="../static/js/controller.js"></script> -->
	</body>
</html>
<style>
    #myModal{
        width:900px;
        height:600px;
        background-color: #00008B;
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -450px;
        margin-top: 200px;
        border-radius: 20px;
        z-index: 999;
        overflow-y: scroll;
    }
    #myModal .title{
        font-size: 24px;
        text-align: center;
        /* color: */
    }
    .ceng{
        width:100%;
        height:1000px;
        background:#fefefe;
        opacity: 0.5;
        position: absolute;
        top:0;
    }
    #myModal .main{
        padding-bottom: 10%;
        height:1000px;
    }
    #myModal .main ul li{
        list-style-type: none;
        color:#fff;
        font-size: 18px;

    }
    .list-item{
        position: relative;
    }
    .Virus_1-1-303_2LSxMS{
        margin: 0;
        padding: 0;
        position: absolute;
        top: 2rem;
        left: 2em;
        width: .375rem;
        height: .375rem;
        background: #0faeb5;
        border-radius: .375rem;
        border-color: #cfeff0;
        border: .1875rem solid #cfeff0;
    }
    .datatime{
        position: absolute;
        top:1.5rem;
        left:3rem;
        color:#fff;
        font-size: 20px;
    }
    .nr{
        position: absolute;
        top:4rem;
        left:4rem;
        font-size: 18px;
        padding:10px 20px;
        color:#4d5054;
        background:#f5f6f7;
        font-weight: 700;
        border-radius: 5px;
    }
    .close{
        position:absolute;
        top:0;
        right:0;
        width:20px;
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        text-align: center;
        color:red;
        border:1px solid #ccc;
        border-radius: 50%;
        z-index: 999;
        cursor: pointer;
    }
</style>
<div class='ceng' style="display: none;"></div>
<!-- 模态框（Modal） -->
<div id="myModal" style="display: none;">
    <div class="close">x</div>
    <div class="header">
        <p class="title">广东疫情新闻</p>
    </div>
    <hr>
    <div class="main">
        <!-- <div class="list-item">2+((j+1)*3)
            <span class="Virus_1-1-303_2LSxMS" style="top:2rem"></span>
            <span class="datatime" style="top:1.5rem">05月22日  09:54</span>
            <div class="nr" style="top:4rem">
                5月21日福建新增境外输入无症状感染者1例
            </div>
        </div>
        <div class="list-item">
            <span class="Virus_1-1-303_2LSxMS" style="top:8rem"></span>
            <span class="datatime" style="top:7.5rem">05月22日  09:54</span>
            <div class="nr" style="top:10rem">
                5月21日福建新增境外输入无症状感染者1例
            </div>
        </div>
        <div class="list-item">
            <span class="Virus_1-1-303_2LSxMS" style="top:14rem"></span>
            <span class="datatime" style="top:13.5rem">05月22日  09:54</span>
            <div class="nr" style="top:16rem">
                5月21日福建新增境外输入无症状感染者1例
            </div>
        </div> -->
    </div>
</div>
<script>
    $('.close').on('click',function(){
        $('#myModal').css('display','none');
        $('.ceng').css('display','none');
    })
</script>
